<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS中的void运算符</title>
</head>
<body>
    <script type="text/javascript">

    </script>

    <h1>页面标题</h1>
<!--    需求如下, 即保留超链接的样式还得使用户点击之后页面不能跳转-->
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<!--    弹出框出现之后, 点击确定, 然后当前超链接页面回到顶部-->
<!--    实际上不是回到顶部, 而是当前页面重新加载-->
<!--    因为 href 路径为空字符串, 代表当前路径, 这里就会跳转到当前页面-->
    <a href="" onclick="alert('你好')">超链接</a>

    <br>

<!--    为了解决需求, 使用 void 函数,-->
<!--    void 运算符的语法为: void(表达式)-->
<!--    运算原理为执行表达式, 但是不返回任何结果-->
<!--    上面的 href="" 不叫 不返回任何结果, 而是空字符串-->
<!--    类似于这样的函数 function () { return "";}-->
<!--    而 void 连空字符串都不返回 (也不是null, 也不是 undefined)-->
    <a href="javascript:void(0)" onclick="alert('你好')">不会跳转的超链接</a>
<!--    解释一下上面的代码:  "javascript:" 代表 后面的代码是一个 JavaScript 语句, 而不是路径-->
<!--    由于 void 代表没有返回值, 所以它没有任何路径可以跳转, 就保留在原来的地方 -->
<!--    void运算符基本上就是在这一个场景比较常用-->
</body>
</html>